<script setup>
//学生用户页面
    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'
    import {
        Iphone,
        Location,
        OfficeBuilding,
        Tickets,
        User,
        Message,
        Male,
        Plus,
        Search,
    } from '@element-plus/icons-vue'

    const chooseclass = ref([
        {courseName:'操作系统',teacherName:'黄老师',grade:'大一',courseType:'实验课',startTime:'2021-09-01',endTime:'2021-12-31', courseDesc: '操作系统是计算机系统的内核和支撑，是计算机系统的基石。它负责管理硬件资源、控制程序的执行、提供稳定运行环境，是计算机系统的基石。'},
        {courseName:'机器学习',teacherName:'李老师',grade:'大二',courseType:'实验课',startTime:'2022-01-01',endTime:'2022-01-02', courseDesc: '机器学习是人工智能领域的一个重要分支，它研究如何让计算机系统通过学习和自我改进，来提高性能、效率、智能。'},
        {courseName:'计算机网络',teacherName:'王老师',grade:'大二',courseType:'实验课',startTime:'2021-09-01',endTime:'2021-12-31', courseDesc: '计算机网络是指将计算机硬件与通信设备连接起来，实现信息交换、资源共享和数据传输的计算机系统。'},
        { courseName:'人工智能', teacherName: '张老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '人工智能是指让计算机具有智能的能力，并能在智能环境中进行高效率的工作、决策和学习的科学技术。' },
        { courseName:'大数据', teacherName: '李老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '大数据是指海量、高维、多样、动态、快速增长的各种数据，是指以网络为基础，利用新型计算技术、存储技术、数据挖掘技术、机器学习技术、人工智能技术等，对海量数据进行高效、准确、智能地分析、处理、挖掘、归纳、总结的科学技术。' },
        { courseName:'Java编程', teacherName: '韩老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'Java是一门面向对象编程语言，是一种静态面向对象编程语言，它是由Sun Microsystems公司于1995年推出的Java程序设计语言和Java虚拟机。' },
        { courseName: '数据库系统', teacherName: '陈老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '数据库系统是指管理、存储和检索大量数据的计算机系统。它是信息系统的核心，是信息资源的管理者、保护者和使用者。' },
        { courseName: 'python', teacherName: '朱老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'Python是一种高级编程语言，它具有简单性、易学性、可读性、可维护性、可扩展性、可移植性等特点。' },
        { courseName: 'C++', teacherName: '杜老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'C++是一种高级编程语言，其设计目标是成为一个具有过程抽象、数据抽象、函数抽象、面向对象、泛型编程和异常处理能力的通用编程语言。' },
        { courseName:'鸿蒙开发',teacherName:'李老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '鸿蒙开发是基于OpenHarmony操作系统开发的，是一种全新的操作系统架构，具有轻量、安全、可靠、可扩展等特点。' }
    ])
    const tableData = [
        { courseName: '操作系统', teacherName: '黄老师',grade: '大一',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '操作系统是计算机系统的内核和支撑，是计算机系统的基石。它负责管理硬件资源、控制程序的执行、提供稳定运行环境，是计算机系统的基石。' },
        { courseName: '机器学习', teacherName: '李老师', grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '机器学习是人工智能领域的一个重要分支，它研究如何让计算机系统通过学习和自我改进，来提高性能、效率、智能。' },
        { courseName: '计算机网络', teacherName: '王老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '计算机网络是指将计算机硬件与通信设备连接起来，实现信息交换、资源共享和数据传输的计算机系统。' },
        { courseName:'人工智能', teacherName: '张老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '人工智能是指让计算机具有智能的能力，并能在智能环境中进行高效率的工作、决策和学习的科学技术。' },
        { courseName:'大数据', teacherName: '李老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '大数据是指海量、高维、多样、动态、快速增长的各种数据，是指以网络为基础，利用新型计算技术、存储技术、数据挖掘技术、机器学习技术、人工智能技术等，对海量数据进行高效、准确、智能地分析、处理、挖掘、归纳、总结的科学技术。' },
        { courseName:'Java编程', teacherName: '韩老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'Java是一门面向对象编程语言，是一种静态面向对象编程语言，它是由Sun Microsystems公司于1995年推出的Java程序设计语言和Java虚拟机。' },
        { courseName: '数据库系统', teacherName: '陈老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '数据库系统是指管理、存储和检索大量数据的计算机系统。它是信息系统的核心，是信息资源的管理者、保护者和使用者。' },
        { courseName: 'python', teacherName: '朱老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'Python是一种高级编程语言，它具有简单性、易学性、可读性、可维护性、可扩展性、可移植性等特点。' },
        { courseName: 'C++', teacherName: '杜老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: 'C++是一种高级编程语言，其设计目标是成为一个具有过程抽象、数据抽象、函数抽象、面向对象、泛型编程和异常处理能力的通用编程语言。' },
        { courseName:'鸿蒙开发',teacherName:'李老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '鸿蒙开发是基于OpenHarmony操作系统开发的，是一种全新的操作系统架构，具有轻量、安全、可靠、可扩展等特点。' },
        { courseName:'数据结构', teacherName: '郑老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '数据结构是计算机科学中研究组织数据的方式、性质和关系的学科。它是计算机科学的基础和核心。' },
        { courseName:'计算机网路',teacherName: '周老师',grade: '大二',courseType:"实验课",startTime:'2021-09-01',endTime:'2021-12-31',  courseDesc: '计算机网络是指将计算机硬件与通信设备连接起来，实现信息交换、资源共享和数据传输的计算机系统。' }
    ]

    const choiceCourse = (course) => {
        const isAlreadyChosen = chooseclass.value.some(item => item.courseName === course.courseName);
        if (isAlreadyChosen) {
            ElMessage.warning('已选该课程');
        } else {
            chooseclass.value.push(course);
        }
    }

    const deleteCourse = (course) => {
        const index = chooseclass.value.findIndex(item => item.courseName === course.courseName);
        if (index !== -1) {
            chooseclass.value.splice(index, 1);
        }
    }

    const currentPage = ref(1);
    const pageSize = 9;

    const filteredTableData = ref([]);
    const fetchData = () => {
        const startIndex = (currentPage.value - 1) * pageSize;
        filteredTableData.value = tableData.slice(startIndex, startIndex + pageSize);
    };


    const search = ref('');
    const searchCourse = () => {
        filteredTableData.value = originalTableData.value.filter(item => 
            item.courseName.includes(search.value)
        );
    };

    const handleCurrentChange = (val) => {
        currentPage.value = val;
        fetchData();
    };

    fetchData();

    const activeName = ref('first');
    

</script>
<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="我的信息" name="first">
                <el-descriptions class="margin-top"  :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            用户名
                            </div>
                        </template>
                            学生
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon :style="iconStyle">
                                    <User />
                                </el-icon>
                                昵称
                            </div>
                        </template>
                        张三
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon :style="iconStyle">
                                    <Male />
                                </el-icon>
                                性别
                            </div>
                        </template>
                        女
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone />
                            </el-icon>
                            手机号
                            </div>
                        </template>
                            18100000000
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Message />
                            </el-icon>
                            邮箱
                            </div>
                        </template>
                            3304271595@qq.com
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <location />
                            </el-icon>
                            家庭住址
                            </div>
                        </template>
                        辽宁省沈阳市浑南区金科街7-3号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            备注
                            </div>
                        </template>
                        <el-tag size="small">学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <office-building />
                            </el-icon>
                            地址
                            </div>
                        </template>
                        辽宁省锦州市
                    </el-descriptions-item>
                </el-descriptions>
                <template class="footer">
                    <el-button type="primary">修改</el-button>
                </template>
            </el-tab-pane>
            <el-tab-pane label="选课中心" name="secound">
                <div style="display: flex; margin-bottom: 10px;">
                    <el-input v-model="search" placeholder="搜索课程" style="width: 200px; margin-right: 10px;">
                        <template #prefix>
                            <el-icon :style="iconStyle">
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="searchCourse">搜索</el-button>
                </div>
                <div>
                    <el-table :data="filteredTableData" :border="parentBorder" style="width: 100%">
                        <el-table-column type="expand">
                        <template #default="props">
                            <div style="background-color: #f2f2f2; padding: 10px;">
                                <el-text>课程简介：<p>{{props.row.courseDesc}}</p></el-text>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column label="课程名称" prop="courseName" />
                        <el-table-column label="课程讲师" prop="teacherName" />
                        <el-table-column label="课程年级" prop="grade" />
                        <el-table-column label="分类" prop="courseType" />
                        <el-table-column label="开课时间" prop="startTime" />
                        <el-table-column label="结课时间" prop="endTime" />
                        <el-table-column label="操作" >
                            <template #default="scope">
                                <el-button type="text" @click="choiceCourse(scope.row)">选课</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination background layout="prev, pager, next" :total="tableData.length" :current-page="currentPage" @current-change="handleCurrentChange" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
            </el-tab-pane>
            <el-tab-pane label="我的选课" name="third">
                <el-table :data="chooseclass">
                    <el-table-column type="expand">
                    <template #default="props">
                        <div style="background-color: #f2f2f2; padding: 10px;">
                            <el-text>课程简介：<p>{{props.row.courseDesc}}</p></el-text>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="课程名称" prop="courseName"/>
                    <el-table-column label="课程讲师" prop="teacherName"/>
                    <el-table-column label="课程年级" prop="grade"/>
                    <el-table-column label="分类" prop="courseType"/>
                    <el-table-column label="开课时间" prop="startTime"/>
                    <el-table-column label="结课时间" prop="endTime"/>
                    <el-table-column label="操作" width="100px">
                        <template #default="scope">
                            <el-button type="text" @click="deleteCourse(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="tableData.length" :current-page="currentPage" @current-change="handleCurrentChange" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
            </el-tab-pane>
        </el-tabs>
        
        
    </div>
</template>
<style scoped lang="scss">
    .footer {
        margin-top: 20px;
        align-items: center;
        display: flex;
        justify-content: center;
    }
</style>
